<!-- 交货确认列表 -->
<template>
  <div>
    <header-menu></header-menu>
    <template v-if="items.length>0">
      <scroller lock-x height="-205" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100">
        <div>
          <div class="driver-list driver-detail" v-for="item in items">
            <template v-if="item.Varchar1 != '1'">
              <div class="list-header">
                  <span class="f-l">业务单号：
                      <i>{{item.BBillNo}}</i>
                  </span>
              </div>
              <div class="list-content">
                  <dl class="displayflex">
                      <dt>
                         <div>
                            <i class="llse llse-cargo"></i>
                            <p>{{item.Pkgs}}件</p>
                          </div>
                      </dt>
                      <dd class="flex1">
                          <p>
                              <label>制单时间：</label>
                              <span>{{item.InputDate | time}}</span>
                          </p>
                          <p>
                              <label>供应单位：</label>
                              <span>{{item.SaleCorpName}}</span>
                          </p>
                          <p>
                              <label>送货联系人：</label>
                              <span>{{item.SendContacts}}-{{item.SendContactsTel}}</span>
                          </p>
                      </dd>
                  </dl>
              </div>
              <div class="list-btn">
                <div class="carbtn" @click="conCheck(item.Guid)">详情</div>
                <div class="carbtn" @click="dispatch(item.Guid)">交货确认</div>
              </div>
            </template>
          </div>
          <p class="txt-bottom" v-if="totalLength == items.length"><em class="txt">我是有底线的</em></p>
        </div>
      </scroller>
    </template>
    <div class="noDate_page" v-if="totalLength==0">
        <div class="noDate_icon">
            <i class="iconfont icon-null"></i>
        </div>
        暂无数据！
    </div>
		<footer-menu></footer-menu>
	</div>
</template>
<script>
import headerMenu from '@/components/carrier/core/carrier-headermenu.vue';
import footerMenu from '@/components/carrier/core/carrier-footer.vue';
import { mapState } from "vuex";
export default  {
  data() {
    return {
      pgNo: 0,
      Page: 0,
      pgSize: 8,
      items: [],
      totalLength: "",
      BBillNo: "",
      count:0
    };
  },
  components:{
      headerMenu,
      footerMenu,
      mapState
  },
  watch: {
    items(val){
      this.count = 0;
    }
  },
  computed: {
    // userId() {
    //   var info = JSON.parse(localStorage.userinfo);
    //   return info.BelongGuid;
    // },
    // BelogName() {
    //   var info = JSON.parse(localStorage.userinfo);
    //   return info.BelongName;
    // }
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  created() {  
    this.getData();  
  },
  methods: {
    // 获取列表信息
    getData: function() {
      if (!this.userinfo.BelongGuid) {
        console.log("请登录，无Id");
      }
      var self = this;
      var params = {
        Page: self.Page,
        Rows: self.pgSize,
        BBillNo: self.BBillNo,
        DeliverGUID: this.userinfo.BelongGuid,
        StateList: [52,56],
      };
      this.Ajax.post("GetOrderlist", params).then(function(resp) {
        if (resp.Datas && resp.Datas.length > 0) {
          self.Page++;
          self.items = self.items.concat(resp.Datas);
        }
        self.totalLength = resp.TotalRecords;
      });
    },
    changePgItems() {
      this.pgNo++;
      this.Page = this.pgNo * this.pgSize;
      this.getData();
    },
    //翻页
    onScrollBottom() {
      this.count++;
      if (this.count == 1 && this.totalLength > this.items.length) {
        this.changePgItems();
      }
    },
    //查看详情
    conCheck: function(id) {
      this.$router.push({
        path: "carrdetail",
        query: {
          Guid: id,
        }
      });
    },
    //交货确认列表
    dispatch: function(id) {
      this.$router.push({
        path: "handoverconfirm",
        query:{
          Guid:id,
        }
      });
    },
  },
};
</script>
